<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 两栏布局 */
    .wrap{
      height: 100px;
      margin-bottom: 20px;
    }
    .left{
      float: left;
      width: 100px;
      height: 100%;
      background-color: aqua;
    }
    .right{
      height: 100%;
      background: aquamarine;
      overflow: hidden;
       /* BFC的区域不会与浮动元素float box重叠   */
    }

    .right2{
      float: right;
      width: 100px;
      height: 100%;
      background-color: aqua;
    }
    .left2{
      height: 100%;
      background: aquamarine;
      overflow: hidden;   
      /* BFC的区域不会与浮动元素float box重叠   */
    }
   

    .wrap{
      position: relative
    }
    .left3 {
      position: absolute;
      left: 0;
      width: 200px;
      height: 100%;
      background-color: bisque;
    }
    .right3{
      margin-left: 200px;
      height: 100%;
      background-color: blueviolet;
    }

    .flex-wrap{
      display: flex;

    }
    .left4{
      width: 100px;
      height: 100%;
      background-color: burlywood;
    }
    .right4{
      flex: 1;
      height: 100%;
      background: brown;
    }

    /* 三栏布局 */
    .three-wrap{
      height: 100px;
      margin-bottom: 24px;
    }
    .three-left{
      width: 100px;
      height: 100%;
      float: left;
      background-color: burlywood;
    }
    .three-middle{
      background: saddlebrown;
      height: 100%;
      overflow: hidden;
    }
    .three-right{
      width: 100px;
      height: 100%;
      float: right;
      background-color: burlywood;
    }
    
    .three-wrap{
      position: relative;
    }
    .three-left2{
      width: 100px;
      height: 100%;
      background-color: burlywood;
      position: absolute;
      left: 0;
      top: 0;
    }
    .three-middle2{
      background: saddlebrown;
      height: 100%;
      margin: 0 100px;
    }
    .three-right2{
      width: 100px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      background-color: burlywood;
    }

    .flex-wrap3{
      display: flex;
    }
    .three-left3{
      width: 100px;
      height: 100%;
      background-color: burlywood;
      
    }
    .three-middle3{
      background:violet;
      height: 100%;
      flex: 1;
    }
    .three-right3{
      width: 100px;
      height: 100%;
      background-color: burlywood;
    }
    /* 圣杯布局2 */
    #header, #footer {
      background: rgba(29, 27, 27, 0.726);
      text-align: center;
      height: 60px;
      line-height: 60px;
      clear: both;
    }
    #container{
      padding-left: 200px;  /* 预留左侧空间，为.left宽度*/
      padding-right: 300px; /* 预留右侧空间，为.right宽度*/
    }
    #center{
      float: left;
      width: 100%;
      height: 300px;
      background: #67c23a;
    }
    #left{
      float: left;
      width: 200px;
      height: 300px;
      background: #e6a23c;
      margin-left: -100%;  
       /* 移动到左侧，100%是一个父元素宽度，这里也就是.container的宽度 */
      position: relative;   
      /* 因为.container设置了padding */
      right: 200px;         
      /* 所以需要再向左移动自身宽度,left: -200px;也是可以的 */
    }
    #right{
      float: left;
      width: 300px;
      height: 300px;
      margin-right: -300px; 
      /* 移动到右侧，自身宽度*/
      background: #f56c6c;
    }

     /* 双飞翼布局*/
     #header2, #footer2 {
      background: rgba(29, 27, 27, 0.726);
      text-align: center;
      height: 60px;
      line-height: 60px;
      clear: both;
    }
    #container2{
      float: left;
      width: 100%;
    }
    #center2{
      margin-left: 200px;   /* 预留左侧空间，为.left宽度 */
      margin-right: 300px;  /* 预留左侧空间，为.right宽度 */
      height: 300px;
      background: #67c23a;
    }
    #left2{
      float: left;
      width: 200px;
      height: 300px;
      margin-left: -100%;   /* 移动到左侧，100%是一个父元素宽度，这里也就是body的宽度*/
      background: #e6a23c;
    
    }
    #right2{
      float: left;
      width: 300px;
      height: 300px;
      margin-left: -300px;  /* 移动到右侧，自身宽度*/
      background: #f56c6c;
    }
   
   /* 瀑布流布局 */
   .streaming-wrap{
     display: flex;
     flex-wrap: wrap;
     /* flex-direction: column; */
   }
   .streaming-item {
      margin: 10px;
      width: calc(100%/3 - 20px);
   }

    /*宽高自适应正方形  */
    /* 1.第一种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现 */
    .square {
      width: 20%;
      height: 0;
      padding-top: 20%;
      background: orange;
    }
    
    /* 2.第二种方式是利用vw来实现 */
    .square2 {
      width: 10%;
      height: 10vw;
      background: tomato;
    }

    /* 3.第三种方式是利用子元素的margin-top的值来实现 */
    .square3 {
      width: 30%;
      overflow: hidden;
      background: yellow;
    }
    .square3::after {
      content: '';
      display: block;
      margin-top: 100%;
    }
    /* 一个自适应矩形，水平垂直居中，且宽高比为 2:1 */
    .box {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;

      width: 10%;
      height: 0;
      padding-top: 20%;
      background: tomato;
    }

    /* 三角形 三角形的实现原理是利用了元素边框连接处的等分原理*/
    .triangle{
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      /* border-right: 100px solid black; */
      /* border-bottom: 100px solid blue; */
      /* border-left: 90px solid seagreen; */
    }
  </style>
</head>
<body>
    <!-- 两栏布局 -->
    <div>
      <!-- 左固定 -->
      <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <!-- 右固定 -->
      <div class="wrap">
        <div class="right2"></div>
        <div class="left2"></div>     
      </div>
    </div>

    <div class="wrap">
      <div class="left3"></div>     
      <div class="right3"></div>
    </div>

    <div class="wrap flex-wrap">
      <div class="left4"></div>     
      <div class="right4"></div>
    </div>

    <!-- 三列布局 -->
    <div class="three-wrap">
      <div class="three-left" ></div>
      <div class="three-right" ></div>
      <div class="three-middle" ></div>
    </div>

    <div class="three-wrap">
      <div class="three-left2" ></div>
      <div class="three-middle2" ></div>
      <div class="three-right2" ></div>
    </div>

    <div class="three-wrap flex-wrap3">
      <div class="three-left3" ></div>
      <div class="three-middle3" ></div>
      <div class="three-right3" ></div>
    </div>

    <!-- 圣杯布局 -->
    <div style="margin-bottom: 24px;">
      <header style="height: 100px;background-color: seagreen;"></header>
      <!-- 弹性布局 -->
        <div class="three-wrap flex-wrap3" style="margin-bottom: 0;">
          <div class="three-middle3" ></div>
          <div class="three-left3" style="order: -1;" ></div>
          <!-- order：用整数值来定义排列顺序，数值小的排在前面。可以为负值  -->
          <div class="three-right3" ></div>
        </div>
      <footer style="height: 100px;background-color: seagreen;"></footer>
    </div>

    <!-- 圣杯布局2 -->
    <div>
      <div id="header">#header</div>
      <div id="container">
        <div id="center">#center</div>
        <div id="left">#left</div>
        <div id="right">#right</div>
      </div>
      <div id="footer">#footer</div>
    </div>

    <!-- 双飞翼布局 --> 
      <div style="margin-top: 32px;">
        <div id="header2"></div>
        <div id="container2" >
          <div id="center2"></div>
        </div>
        <div id="left2" ></div>
        <div id="right2" ></div>
        <div id="footer2"></div>
      </div>


    <!-- 圣杯布局和双飞翼布局的异同：
      相同：
      两侧宽度固定，中间宽度自适应
      中间部分在DOM结构上优先，以便先行渲染
      允许三列中的任意一列成为最高列
      只需要使用一个额外的<div>标签
      不同： 
      实现方法不同：双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
    
    -->

    <!-- 瀑布流布局 -->
    <div class="streaming-wrap">
      <div class="streaming-item">
        <div style="height: 600px;background-color: aqua;"></div>
      </div>
      <div class="streaming-item">
        <div style="height: 400px;background-color: aqua;"></div>
      </div><div class="streaming-item">
        <div style="height: 600px;background-color: aqua;"></div>
      </div>
      <div class="streaming-item">
        <div style="height: 300px;background-color: aqua;"></div>
      </div>
      <div class="streaming-item">
        <div style="height: 400px;background-color: aqua;"></div>
      </div><div class="streaming-item">
        <div style="height: 500px;background-color: aqua;"></div>
      </div>
    </div>

    <!-- 宽高自适应正方形 -->
    <div class="square"></div>
    <div class="square2"></div>
    <div class="square3"></div>

    <!-- 一个自适应矩形，水平垂直居中，且宽高比为 2:1  -->
    <div class="box"></div>

    <!-- 三角形 -->
    <div class="triangle "></div>

    <!-- 图片精灵 -->
    <!-- 图像精灵是单个图像中包含的图像集合。包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。
      使用图像精灵将减少服务器请求的数量并节约带宽。 -->
    <!-- 相对路径绝对路径 -->
    <!-- 绘制1px,0.5px高的线 -->
     <!-- 瀑布流布局 -->
    <!-- sass,less预处理器 -->
</body>
</html>